<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <link rel="shortcut icon" href="./images/favicon (4).ico">
    <link rel="bookmark icon" href="./images/favicon (4).ico">
    <title>咔酷</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body class="theme">
    <div class="globalContent">
        <div class="sidebar theme">
            <header id="globalLogo">
                <img src="./images/logo.png" alt="">
                <svg t="1624330959849" class="icon menu" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4278" width="200" height="200">
                    <path
                        d="M90.258176 848.52215466L933.08326402 848.52215466c46.36262401 0 84.29568 37.933056 84.29567998 84.29568s-37.933056 84.29568-84.29567999 84.29568001l-842.69337602 0c-46.36262401 0-84.29568-37.933056-84.29568-84.29568001-0.13171201-46.36262402 37.801344-84.29568 84.16396801-84.29568zM90.258176 435.86845867L928.078208 435.86845867c46.36262401 0 84.29568 37.933056 84.29568 84.29567999s-37.933056 84.29568-84.29568 84.29568l-837.820032 0c-46.36262401 0-84.29568-37.933056-84.29568-84.29568s37.933056-84.29568 84.29568-84.29567999zM90.258176 15.70717865L933.08326401 15.70717864c46.36262401 0 84.29568 37.933056 84.29567999 84.29568001s-37.933056 84.29568-84.29567999 84.29568003l-842.69337601 0c-46.36262401 0-84.29568-37.933056-84.29568001-84.29568003-0.13171201-46.36262402 37.801344-84.29568 84.16396801-84.29568z"
                        fill="#e6e6e6" p-id="4279"></path>
                </svg>
            </header>
            <main class="sidebar-main theme">
                <ul>
                    <a href="#1" class="mount">
                        <li class="sidebar-item">
                            <svg class="icon theme" aria-hidden="true">
                                <use xlink:href="#icon-qianduan1"></use>
                            </svg>
                            <span class="theme sideText">前端框架</span>
                        </li>
                    </a>
                    <a href="#2" class="mount">
                        <li class="sidebar-item">
                            <svg class="icon theme" aria-hidden="true">
                                <use xlink:href="#icon-node-js"></use>
                            </svg>
                            <span class="theme sideText">Node.js</span>
                        </li>
                    </a>
                    <a href="#3" class="mount">
                        <li class="sidebar-item">
                            <svg class="icon theme" aria-hidden="true">
                                <use xlink:href="#icon-vuezujian"></use>
                            </svg>
                            <span class="theme sideText">Vue(PC端)组件</span>
                        </li>
                    </a>
                    <a href="#4" class="mount">
                        <li class="sidebar-item">
                            <svg class="icon theme" aria-hidden="true">
                                <use xlink:href="#icon-vuezujian"></use>
                            </svg>
                            <span class="theme sideText">Vue(移动端)组件</span>
                        </li>
                    </a>
                    <a href="#5" class="mount">
                        <li class="sidebar-item">
                            <svg class="icon theme" aria-hidden="true">
                                <use xlink:href="#icon-react"></use>
                            </svg>
                            <span class="theme sideText">React(PC端)组件</span>
                        </li>
                    </a>
                    <a href="#6" class="mount">
                        <li class="sidebar-item">
                            <svg class="icon theme" aria-hidden="true">
                                <use xlink:href="#icon-react1"></use>
                            </svg>
                            <span class="theme sideText">React(移动端)组件</span>
                        </li>
                    </a>
                    <a href="#7" class="mount">
                        <li class="sidebar-item">
                            <svg class="icon theme" aria-hidden="true">
                                <use xlink:href="#icon-angular"></use>
                            </svg>
                            <span class="theme sideText">Angular组件</span>
                        </li>
                    </a>
                    <a href="#8" class="mount">
                        <li class="sidebar-item">
                            <svg class="icon theme" aria-hidden="true">
                                <use xlink:href="#icon-xiaochengxu"></use>
                            </svg>
                            <span class="theme sideText">小程序框架</span>
                        </li>
                    </a>
                    <a href="#9" class="mount">
                        <li class="sidebar-item">
                            <svg class="icon theme" aria-hidden="true">
                                <use xlink:href="#icon-UIzujian"></use>
                            </svg>
                            <span class="theme sideText">UI组件库</span>
                        </li>
                    </a>
                    <a href="#10" class="mount">
                        <li class="sidebar-item">
                            <svg class="icon theme" aria-hidden="true">
                                <use xlink:href="#icon-zidingyi"></use>
                            </svg>
                            <span class="theme sideText">自定义</span>
                        </li>
                    </a>
                    <a href="mailto:ypy979922@163.com">
                        <li class="sidebar-item linkme">
                            <svg class="icon theme" aria-hidden="true">
                                <use xlink:href="#icon-lianxi"></use>
                            </svg>
                            <span class="theme sideText">联系我</span>
                        </li>
                    </a>
                </ul>
            </main>
        </div>
        <div class="content theme" id="text">
            <header class="globalHeader">
                <form class="searchForm" method="get" action="https://www.baidu.com/s">
                    <input type="text" name="wd" placeholder="百度一下" class="theme search">
                    <button type="submit" class="theme search">搜索</button>
                </form>
            </header>
            <main class="globalMain">
                <div class="piece" id="1">
                    <div class="title">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhishibiao"></use>
                        </svg>
                        <h2>前端框架</h2>
                    </div>
                    <ul class="siteList">
                        <a href="https://reactjs.bootcss.com/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/icon-72x72-1.png"
                                            alt="">
                                    </div>
                                    <div class="link">React</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://angular.cn/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/favicon-96x96-1.png"
                                            alt="">
                                    </div>
                                    <div class="link">Angular中文网</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://cn.vuejs.org/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/apple-icon-76x76-1.png"
                                            alt="">
                                    </div>
                                    <div class="link">Vue.js</div>
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>

                <div class="piece" id="2">
                    <div class="title">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhishibiao"></use>
                        </svg>
                        <h2>Node.js</h2>
                    </div>
                    <ul class="siteList">
                        <a href="https://www.npmjs.com/">
                            <li>
                                <div class="site  theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/npm.png" alt="">
                                    </div>
                                    <div class="link">npm</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://thinkjs.org/doc/index.html">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img src="https://api.iowen.cn/favicon/thinkjs.org.png" alt="">
                                    </div>
                                    <div class="link">ThinkJS</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://eggjs.org/zh-cn/intro/quickstart.html">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/egg.jpg" alt="">
                                    </div>
                                    <div class="link">Egg</div>
                                </div>
                            </li>
                        </a>
                        <a
                            href="https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/next.png" alt="">
                                    </div>
                                    <div class="link">Next.js</div>
                                </div>
                            </li>
                        </a>
                        <a
                            href="https://www.nextjs.cn/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=next-website">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/icon.png" alt="">
                                    </div>
                                    <div class="link">Next.js中文网</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://www.koajs.com.cn/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/koa-logo.jpg"
                                            alt="">
                                    </div>
                                    <div class="link">Koa中文网</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://www.expressjs.com.cn/en/resources/middleware/session.html">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/favicon.png"
                                            alt="">
                                    </div>
                                    <div class="link">Express中文网</div>
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>

                <div class="piece" id="3">
                    <div class="title">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhishibiao"></use>
                        </svg>
                        <h2>Vue(PC端)组件</h2>
                    </div>
                    <ul class="siteList">
                        <a href="https://cli.vuejs.org">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/vue-1.png" alt="">
                                    </div>
                                    <div class="link">Vue CLI</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://router.vuejs.org/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/vue-1.png" alt="">
                                    </div>
                                    <div class="link">Vue Router</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://vue-loader-v14.vuejs.org/zh-cn/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/vue-1.png" alt="">
                                    </div>
                                    <div class="link">Vue Loader</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://ssr.vuejs.org/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/vue-1.png" alt="">
                                    </div>
                                    <div class="link">Vue SSR</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://vuepress.vuejs.org/guide/getting-started.html#prerequisites">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/vuepress.png"
                                            alt="">
                                    </div>
                                    <div class="link">Vue Press</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://baidu.github.io/san/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/san.png" alt="">
                                    </div>
                                    <div class="link">San</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://www.heyui.top/component/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/heyui.png" alt="">
                                    </div>
                                    <div class="link">HeyUI</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://vuetifyjs.com/en/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/vuetify.png"
                                            alt="">
                                    </div>
                                    <div class="link">Vuetify</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://vuejs.github.io/ui/#/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/vue.png" alt="">
                                    </div>
                                    <div class="link">Vue UI Framework</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://www.iviewui.com/docs/introduce">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/7dcf5af41fac2e4728549fa7e73d61c5.png"
                                            alt="">
                                    </div>
                                    <div class="link">View UI</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://zh.nuxtjs.org/docs/2.x/get-started/installation">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/nuxt.png" alt="">
                                    </div>
                                    <div class="link">Nuxt</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://antdv.com/docs/vue/introduce-cn/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/antdv.png" alt="">
                                    </div>
                                    <div class="link">Ant Design Vue</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://muse-ui.org/#/zh-CN/installation">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/muse.png" alt="">
                                    </div>
                                    <div class="link">Muse-UI</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://muse-ui.org/#/en-US/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/element-logo-small.png"
                                            alt="">
                                    </div>
                                    <div class="link">Element</div>
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>

                <div class="piece" id="4">
                    <div class="title">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhishibiao"></use>
                        </svg>
                        <h2>Vue(移动端)组件</h2>
                    </div>
                    <ul class="siteList">
                        <a href="https://vue.zarm.design/#/documents/quick-start">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/Zarm-React.png"
                                            alt="">
                                    </div>
                                    <div class="link">Zarm Vue</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://incubator.apache.org/projects/weex.html">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/weex.png" alt="">
                                    </div>
                                    <div class="link">WEEX</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://vux.li/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/vux.png" alt="">
                                    </div>
                                    <div class="link">VUX</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://didi.github.io/mand-mobile/#/en-US/home">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/mand.png" alt="">
                                    </div>
                                    <div class="link">Mand mobile</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://wangdahoo.github.io/vonic-documents/#/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/logo.png" alt="">
                                    </div>
                                    <div class="link">Vonic</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://youzan.github.io/vant/#/zh-CN/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/vant.png" alt="">
                                    </div>
                                    <div class="link">Vant</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://mint-ui.github.io/docs/#/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/%E4%B8%8B%E8%BD%BD.png"
                                            alt="">
                                    </div>
                                    <div class="link">mint UI</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/QQ%E6%88%AA%E5%9B%BE20201029090752.png"
                                            alt="">
                                    </div>
                                    <div class="link">Cube UI</div>
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>

                <div class="piece" id="5">
                    <div class="title">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhishibiao"></use>
                        </svg>
                        <h2>React(PC端)组件</h2>
                    </div>
                    <ul class="siteList">
                        <a href="https://nervjs.github.io/docs/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/nerv.png" alt="">
                                    </div>
                                    <div class="link">Nerv</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://youzan.github.io/zent/zh/guides/install">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/vant.png" alt="">
                                    </div>
                                    <div class="link">Zent</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://elemefe.github.io/element-react/#/zh-CN/quick-start">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/element-logo-small.png"
                                            alt="">
                                    </div>
                                    <div class="link">Element React</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://pro.ant.design/docs/getting-started-cn">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/antdr.png" alt="">
                                    </div>
                                    <div class="link">Ant Design Pro</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://dvajs.com/guide/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/themes/webstackpro/images/favicon.png"
                                            alt="">
                                    </div>
                                    <div class="link">DvaJS</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://umijs.org/docs/getting-started">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/umi.png" alt="">
                                    </div>
                                    <div class="link">UmiJS</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://preactjs.com/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/preact.png" alt="">
                                    </div>
                                    <div class="link">Preact</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://ant.design/docs/react/introduce-cn">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/antdr.png" alt="">
                                    </div>
                                    <div class="link">Ant Design React</div>
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>

                <div class="piece" id="6">
                    <div class="title">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhishibiao"></use>
                        </svg>
                        <h2>React(移动端)组件</h2>
                    </div>
                    <ul class="siteList">
                        <a href="https://zarm.design/#/docs/quick-start">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/Zarm-React.png"
                                            alt="">
                                    </div>
                                    <div class="link">Zarm React</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://didi.github.io/pile.js/docs/#/pile.js/components/introduce">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/Pile.png" alt="">
                                    </div>
                                    <div class="link">Pile</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://reactnative.dev/docs/getting-started">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/react.png" alt="">
                                    </div>
                                    <div class="link">React Native</div>
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>

                <div class="piece" id="7">
                    <div class="title">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhishibiao"></use>
                        </svg>
                        <h2>Angular组件</h2>
                    </div>
                    <ul class="siteList">
                        <a href="https://ng-alain.com/docs/getting-started/zh">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/ng-alain.png"
                                            alt="">
                                    </div>
                                    <div class="link">NG-ALAIN</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://ng.ant.design/docs/introduce/en">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/NG-ZORRO.png"
                                            alt="">
                                    </div>
                                    <div class="link">NG-ZORRO</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://ionic.io/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/Ionic-1.png"
                                            alt="">
                                    </div>
                                    <div class="link">Ionic</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://angular.io/api/elements">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/element-logo-small.png"
                                            alt="">
                                    </div>
                                    <div class="link">Element Angular</div>
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>

                <div class="piece" id="8">
                    <div class="title">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhishibiao"></use>
                        </svg>
                        <h2>小程序框架</h2>
                    </div>
                    <ul class="siteList">
                        <a href="https://uniapp.dcloud.io/api/README">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/uni.png" alt="">
                                    </div>
                                    <div class="link">uni-app</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://cml.js.org/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/Chameleon.png"
                                            alt="">
                                    </div>
                                    <div class="link">Chameleon</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://megalojs.org/#/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/megalo.png" alt="">
                                    </div>
                                    <div class="link">Megalo</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://didi.github.io/mpx/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/mpx-logo.png"
                                            alt="">
                                    </div>
                                    <div class="link">Mpx</div>
                                </div>
                            </li>
                        </a>
                        <a href="http://mpvue.com/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/mpvue.png" alt="">
                                    </div>
                                    <div class="link">mpvue</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://wepyjs.gitee.io/wepy-docs/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/wepy.png" alt="">
                                    </div>
                                    <div class="link">Wepy</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://tencent.github.io/omi/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/omi.png" alt="">
                                    </div>
                                    <div class="link">Omi</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://developers.weixin.qq.com/miniprogram/dev/extended/kbone/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/wechat-2-fill.png"
                                            alt="">
                                    </div>
                                    <div class="link">kbone</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://remaxjs.org/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/Remax.png" alt="">
                                    </div>
                                    <div class="link">Remax</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://taro.jd.com/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/11/logo-taro.png"
                                            alt="">
                                    </div>
                                    <div class="link">Taro</div>
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>

                <div class="piece" id="9">
                    <div class="title">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhishibiao"></use>
                        </svg>
                        <h2>UI组件库</h2>
                    </div>
                    <ul class="siteList">
                        <a href="https://framework7.io/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/favicon-1.png"
                                            alt="">
                                    </div>
                                    <div class="link">Framework7</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://weui.io/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/wechat-2-fill.png"
                                            alt="">
                                    </div>
                                    <div class="link">WeUI</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://dev.dcloud.net.cn/mui/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/apple-touch-icon-114x114-1.png"
                                            alt="">
                                    </div>
                                    <div class="link">MUI</div>
                                </div>
                            </li>
                        </a>
                        <a href="https://www.bootcss.com/">
                            <li>
                                <div class="site theme">
                                    <div class="logo"><img
                                            src="https://www.htmltrip.com/wp-content/uploads/2020/10/apple-touch-icon-precomposed.png"
                                            alt="">
                                    </div>
                                    <div class="link">Bootstrap中文网</div>
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>

                <div class="piece" id="10">
                    <div class="title">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhishibiao"></use>
                        </svg>
                        <h2>自定义</h2>
                    </div>
                    <ul class="siteList lastList">
                        <li class="last">
                            <div class="addButton theme">
                                <div class="icon-wrapper">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-add"></use>
                                    </svg>
                                </div>
                                <div class="text theme">新建网站</div>
                            </div>
                        </li>
                    </ul>
                    <ul class="ps theme"><span>ps:按键盘对应字母可直接跳转到对应网站哦！</span></ul>
                </div>
            </main>
        </div>
    </div>

    <button id="shift">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-light" id="shiftIcon"></use>
        </svg>
    </button>
    <script src="//at.alicdn.com/t/font_2622316_c3gi93o37vi.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="./back.js"></script>
    <script src="./main.js"></script>
</body>

</html>